<template>
  <div class="ring_wrapper">
    <div class="c_circle">
      <x-circle
        :percent="curPercent"
        :stroke-width="8"
        :trail-width="8"
        trail-color="#fee6c3"
        stroke-color="#febc5c"
      >
      <span class="num">{{ curPercent }}%</span>
      </x-circle>
      <div class="wave_wrapper" id="ring">
        <!-- <img src="static/image/index/home_img_kybd_2@2x.png" alt=""> -->
        <div class="waterH" :style="{height:(curWaterH)+'%'}">
          <div class="wave wave1"></div>
          <div class="wave wave2"></div>
          <div class="wave wave3"></div>
        </div>
      </div>
    </div>
    <ul class="c_bar">
      <li>
        <span>财运</span>
        <x-progress :percent="curCyPercent" :show-cancel="false"></x-progress>
      </li>
      <li>
        <span>事业</span>
        <x-progress :percent="curSyPercent" :show-cancel="false"></x-progress>
      </li>
      <li>
        <span>爱情</span>
        <x-progress :percent="curGqPercent" :show-cancel="false"></x-progress>
      </li>
    </ul>
  </div>
</template>
<script>
import { XCircle, XProgress } from "vux";
import { setInterval, clearInterval } from "timers";
export default {
  components: {
    XCircle,
    XProgress
  },
  data() {
    return {
      curPercent: 0, //当前环
      curCyPercent: 0, //当前财运进度形进度
      curSyPercent: 0, //当前事业进度
      curGqPercent: 0, //当前爱情进度
      progressObj:{
        cyProgress:'',//财运总进度
        syProgress:'',//事业总进度
        gqProgress:'',//感情总进度
        curProgress:'',//环最终进度
      },
      timer: [], //进度条定时器
      curWaterH:0,
      wid: 1,//设备加速度标识 1：代表首次进入，激活加速度。null：表示从其他页面返回首页，激活加速度
      reflesh: this.value,//是否刷新
    };
  },
  props:{
    value: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    progressObj:{
      handler: function(val, oldval) {
        // console.log(val);
         this.fetch_page();
         this.addProgress('curCyPercent',val.cyProgress);
         this.addProgress('curSyPercent',val.syProgress);
         this.addProgress('curGqPercent',val.gqProgress);
         this.addProgress('curPercent',val.curProgress);
      },
      immediate: true,
      deep:true
    },
    value(nVal, oVal){
      if(nVal){
        this.reflesh = nVal
        this.fetch_page()
      }
    }
  },
  created(){//wid:1,首次进入页面激活加速度监视器标识
    this.fetch_page();
    document.addEventListener( "plusready", this.watchAcceleration, false );
  },
  activated(){//wid:null,从其他页面进入激活加速度监视器标识
    if (this.wid == null) {
      this.watchAcceleration();
    }
  },
  deactivated(){
    this.clearWatch();//清除加速度监视器
  },
  methods: {
    addProgress(curNum,allProgress) {
      let t = setInterval(() => {
        if (this[curNum] >= allProgress) {
          clearInterval(t);
          return false;
        }
        this[curNum]++;
        if(curNum == 'curPercent'){
          if(this.curWaterH > allProgress){
            return false;
          }
          this.curWaterH ++;
        }
        // console.log(this[curNum],allProgress);
      }, 100);
      this.timer.push(t)
    },
    // 监听设备加速度变化
    watchAcceleration(){
      var self = this;
      var o = document.getElementById('ring');
      this.wid = plus.accelerometer.watchAcceleration( function ( a ) {
        // console.log('加速度',a.xAxis);
        var x = a.xAxis;
        var y = a.yAxis;
        var z = a.zAxis;
        var flag=1;//向右
        var r=0;

        let yVal = y > 0 ? 0 : y;
        let finalDeg = 0;

        if (x > 0) {
          finalDeg = x + Math.abs(yVal);  
        } else {
          finalDeg = x + yVal;
        }
        
        o.style.transform = `rotate(${finalDeg*10}deg)`;
        o.style.transition ='transform 1s linear';
      }, function ( e ) {
        plus.nativeUI.alert("watchAcceleration error: " + JSON.stringify(e)); 
      },); 
    },
    // 关闭监听设备加速度
    clearWatch(){
      if(typeof plus !== 'undefined') {
        plus.accelerometer.clearWatch(this.wid);
        this.wid = null;
      }
    },
    fetch_page(){
      let uid = this.$store.state.userID;
      if(!uid) return;
      this.$fetch.post('/app/Jmmfcs/bzday_index',{'device':uid}).then((res)=>{
        if(res.code ==200){
          this.progressObj.cyProgress = res.data.cy_fenshu;
          this.progressObj.syProgress = res.data.sy_fenshu;
          this.progressObj.gqProgress = res.data.gq_fenshu;
          this.progressObj.curProgress = res.data.average;
          this.addProgress('curCyPercent',this.progressObj.cyProgress);
          this.addProgress('curSyPercent',this.progressObj.syProgress);
          this.addProgress('curGqPercent',this.progressObj.gqProgress);
          this.addProgress('curPercent',this.progressObj.curProgress);
        }
      });
    }
  }

};
</script>
<style lang="less">
.ring_wrapper {
  display: flex;
  align-items: center;
  padding: 0 40px;
  .c_circle {
    flex:0 0 164px;
    height: 164px;
    margin-right: 50px;
    position: relative;
    .vux-circle-content{
      z-index: 10;
      font-size: 36px;
      color: #fff;
    }
    .wave_wrapper{
      position: absolute;
      top: 20px;
      left: 20px;
      width: 124px;
      height: 124px;
      border-radius: 50%;
      background: #fee6c3;
      overflow: hidden;
      z-index: 1;
      .waterH{
        width: 100%;
        position: absolute;
        bottom: 0;
        z-index: 2;
        transition: height .15s linear;
        .wave{
          width: 200px;
          height: 200px;
          position: absolute;
          background: linear-gradient(to top,#ffcc7f,#ffbd5a);
          &.wave1{
            background: linear-gradient(to top,#ffd392);
            left: 0;
            top: 0;
            border-top-right-radius: 50px;
            border-top-left-radius: 70px;
            border-bottom-right-radius: 80px;
            border-bottom-left-radius: 60px;
            animation: waveA 4s linear infinite;
            // background: linear-gradient(to top,red);
          }
          &.wave2{
            left: -70px;
            top: 5px;
            z-index: 1;
            border-top-right-radius: 70px;
            border-top-left-radius: 60px;
            border-bottom-right-radius: 50px;
            border-bottom-left-radius: 80px;
            animation: waveA 6s linear infinite;
          }
          &.wave3{
            right: -70px;
            border-top-right-radius: 80px;
            border-top-left-radius: 50px;
            border-bottom-right-radius: 60px;
            border-bottom-left-radius: 70px;
            animation: waveA 6s linear infinite;
          }
        }
      }
    }
  }
  .c_bar{
    flex: 1;
    flex-direction: column;
    li{
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      span{
        font-size: 30px;
        margin-right: 30px;
      }
      .weui-progress{
        flex: 1;
        .weui-progress__bar{
          height: 23px;
          background: #FFE7C3;
          border-radius: 12px;
          display: flex;
          align-items: center;
          padding: 0 4px;
        }
        .weui-progress__inner-bar{
          height: 15px;
          background: linear-gradient(to right,#FFCE85,#FFBC58);
          border-radius: 8px;
        }
      }
    }
  }
}
@keyframes waveA {
    0% {
    	transform: rotate(0deg);
    	-webkit-transform: rotate(0deg);
    }
    100% {
    	transform: rotate(360deg);
    	-webkit-transform: rotate(360deg);
    }
}
</style>


